body { background: #25262B; }

#ios-bg { width: 380px; height: 742px; margin: 0 auto; background-image: url(../resource/images/background/iphone-bg.png) }
#ios-base { position: relative; left: 32px; top: 129px; width: 320px; height: 480px; background: url(../resource/images/background/background.jpg) no-repeat }

.ios-space { display: -webkit-box }

.pos-relt { position: relative;}

.sub-view { width:100%; display: -webkit-box }
.ios-content { overflow: hidden; height: 100%; display: -webkit-box; -webkit-box-orient: vertical }
.base-content { -webkit-transition-duration: 400ms, 100ms; -webkit-transition-property:-webkit-transform, background; -webkit-transition-delay: 100ms, 0ms }

.home-button { width: 55px; height: 55px; -webkit-transform: translate3d(131px, 38px, 0) }

.top-bar { z-index:2; height: 20px; position: absolute; width: 100%; -webkit-box-orient: horizontal; background: rgba(0, 0, 0, 0.597656); -webkit-transition-duration: 400ms, 200ms, 300ms; -webkit-transition-property:-webkit-transform, background, opacity; -webkit-transition-delay: 100ms, 300ms, 100ms }
.status-icon { display: -webkit-box }
.status-space { display: -webkit-box }
.status-signal { background: url(../resource/images/status/signal.png) no-repeat }
.status-att { background: url(../resource/images/status/ATT.png) no-repeat }
.status-wifi { background: url(../resource/images/status/WiFi.png) no-repeat }
.status-lock { background: url(../resource/images/status/lock.png) no-repeat }
.status-battery { background: url(../resource/images/status/battery.png) no-repeat }
.status-battery-count { }
.status-time span { position: absolute; color: white }

.lock-screen { -webkit-box-orient: vertical; overflow: hidden }
  .lock-date, .lock-space, .lock-slider {top:20px; position: relative; width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-transition-duration: 500ms; -webkit-transition-delay: 100ms }
  .lock-date { color:white; font-weight:100; font-family:Arial, Helvetica, sans-serif; text-align: center; background-image: -webkit-linear-gradient(rgba(44, 44, 44, 0.3), rgba(21, 21, 21, 0.3) 52%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6)) }
    .lock-date-hm { font-size: 55px; text-align: center }
    .lock-date-YMD { font-size: 15px }
      .lock-date span { left: 50%; position: absolute }
  .lock-slider { top: 0; background-image: url(../resource/images/lock-stuff/lock-bottom.png); /*background-image: -webkit-linear-gradient(rgba(44, 44, 44, 0.3), rgba(21, 21, 21, 0.3) 52%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6));*/ }
  .lock-slider-image { -webkit-transition-duration: 0; position: absolute; width: 100%; height: 94px;  background: url(../resource/images/lock-stuff/slide-to-unlock.gif) no-repeat }
    .lock-container-parent{ display: -webkit-box; -webkit-box-orient: horizontal }
  .lock-slider-handler { -webkit-transition-duration: 0; left: 21px; position: absolute; height: 50px; width: 72px; background: url(../resource/images/lock-stuff/lock-slider.png) no-repeat }
    
.icon-screen { -webkit-box-orient: vertical; overflow: hidden; position: relative }
  .ios-icon { text-align: center; position: absolute; left: 0; top: 0; width: 58px; height: 70px; -webkit-box-orient: vertical; -webkit-transition-duration: 450ms; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: 100ms }
      .shake-layer, .scale-layer, .opera-layer { -webkit-box-orient: vertical; display: -webkit-box; -webkit-box-flex: 70 }
      .shake-layer { -webkit-transition-duration: 65ms }
      .scale-layer { -webkit-transition-duration: 450ms }
      .icon-screen span { width: 56px; font-family: Tahoma, Geneva, sans-serif ;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); font-size: 12px ;color: rgba(255, 255, 255, 0.8); position: absolute }
      .icon-cover { display:none; position: absolute; width: 56px; height: 57px; -webkit-border-radius: 10px; background: rgba(0, 0, 0, 0.3); margin-left: 1px }
.app-content { top: 20px; z-index:1; height: 100%; position: absolute; width: 320px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 450ms; -webkit-transition-timing-function: ease-in-out; -webkit-transition-delay: 100ms; -webkit-transform: scale3d(0, 0, 0)}
  .screen-iframe { border: none; width: 320px; height: 100%; overflow: hidden; background-color: #FFFFFF }

.list-container { min-height: 100%; width:100%; overflow:hidden; display: -webkit-box; -webkit-box-orient: vertical }
  .ios-list { width: 100%; border-bottom: 1px gray solid; line-height: 44px; height: 44px; display: -webkit-box;}
  .ios-list .list-content { -webkit-transition-duration:100ms; -webkit-box-orient: horizontal; display: -webkit-box; width: 100% }
  .list-view { height: 100%; -webkit-box-orient: vertical }

.card-view { position: relative }

.tool-bar { position: relative; z-index: 2 }
.toolbar-btn, .toolbar-title, .btn-content{ position: absolute }
.bar-elem{ -webkit-transition-duration: 450ms; -webkit-transition-delay:200ms; display: -webkit-box }
.btn-content { display: -webkit-box; width: 100%; height: 100% }
.tool-bar .right-btn, .tool-bar .replace-btn { right: 5px; top: 7px }
.tool-bar .left-btn  { left: 5px; top: 7px }
.tool-bar .replace-btn { display: none }
.tool-bar .bar-title { position: absolute; left: 50%; top: 11px; font-size: 19px; color: white }
.ios-toolBtn { height: 100% }
